<template>
  <div class="hero-box">
    <div class="img-wrapper circle-anime-wrapper">
      <!-- <img
        src="/me.jpg"
        alt="fridolph"
      > -->
      <img
        :src="base.avatar"
        alt="fridolph"
      >
      <div class="wrapper right">
        <div class="circle-progress right-circle"></div>
      </div>
      <div class="wrapper left">
        <div class="circle-progress left-circle"></div>
      </div>
    </div>
    <h2>{{base.name}}</h2>
    <small>{{base.summary}}</small>
  </div>
</template>

<script>
export default {
  name: 'userinfo',
  props: {
    base: {
      type: Object,
      default() {
        return {
          name: '',
          avatar: '',
          summary: '',
          education: '',
          seniority: '',
        }
      },
    },
  },
}
</script>
